<template>
    <div class="w_h_100">
        <div class="inlet">报表统计 > 监管报送 > 年报 > <span class="size">资产负债情况</span></div>
        <div class="header d_f j_c_s_b m_t_10">
            <div class="d_f">
                <h4>年度报送</h4>
                <el-dropdown @command="handleCommand">
                    <span class="dropdown">
                        {{ month }}
                        <el-icon class="">
                            <ArrowDown />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(item, index) in arr" :key="index" :command="item">{{ item
                                }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <el-button type="primary" :icon="Bottom" @click="downloadOut">下载</el-button>
        </div>
        <div class="report m_t_16 ">
            <div class="w_100 headTips d_f j_c_s_b">
                <div class="d_f a_i_c">
                    <div class="line"></div>
                    资产负债情况
                </div>
            </div>
            <div class="box">
                <div>说明</div>
                <div class="m_l_5 m_t_5">
                    1.本表统计范围为在本省（区、市）持有融资担保业务经营许可证的融资担保法人机构，本省（区、市）融资担保法人机构在省（区、市）内外设立的分支机构数据需汇总至法人机构后统一填报。
                </div>
                <div class="m_l_5 m_t_5">
                    2.本表依据《中华人民共和国会计法》、《企业财务会计报告条例》（国务院令第287号）、《企业会计准则》、《金融企业财务规则》（财政部令第42号）等有关规定填写。</div>
                <div class="m_l_5 m_t_5">3.外币数据须按报告期末最后一天国家外汇管理局公布的基准汇价折合为人民币数据进行汇总。</div>
                <div class="m_l_5 m_t_5">4.填列的金额按四舍五入保留整数。</div>
                <div class="m_l_5 m_t_5">
                    5.校验关系：[A]+[B]=[C]，[310]+[316]=[301]，[302]+[303]+[304]+[305]+[307]+[308]+[309]=[301]，[311]+[312]+[313]+[314]+[315]=[310]，[317]+[318]+[319]=[316]。
                </div>
            </div>
            <mytable :fields="fields" ref="tableRef" :values="{}" :defaultList="records" class="m_t_20"
                :isSelection="false" :isPaginationShow="false" :handle="false" :serial="false">
                <template v-slot:projectName="{ row }">
                    <div :style="{ marginLeft: row.num * 6 + 'px' }">{{ row.projectName }}</div>
                </template>
            </mytable>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
import { superviseList, superviseDownload } from "../../../api/report"
import { momentDate, momentStartOf, derivation, momentEndOf } from '../../../utils/date'
import { compensationRecovery } from '../../../type/report'
import { useRoute } from 'vue-router';
import { Bottom } from '@element-plus/icons-vue'
export default defineComponent({
    name: '',
    setup() {
        const data: compensationRecovery = reactive({
            startTime: '',
            endTime: '',
            key: '',
            month: '',
            arr: [],
            fields: [
                {
                    label: '项目',
                    prop: 'projectName',
                    width: '250px',
                },
                {
                    label: '代码',
                    prop: 'code',
                    width: '150px',
                },
                {
                    label: 'A',
                    prop: 'code',
                    width: '150px',
                    children: [
                        {
                            label: '期末数',
                            prop: 'stateOwnedInstitution',
                            width: '150px',
                            children: [
                                {
                                    label: '国有控股融资担保机构',
                                    prop: 'stateOwnedInstitution',
                                    width: '150px',

                                },
                            ],
                        },
                    ],
                },
                {
                    label: 'B',
                    prop: 'code',
                    width: '200px',
                    children: [
                        {
                            label: '期末数',
                            prop: 'privatelyInstitution',
                            width: '200px',
                            children: [
                                {
                                    label: '民营及外资融资担保机构',
                                    prop: 'privatelyInstitution',
                                    width: '200px',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: 'C',
                    prop: 'code',
                    width: '300px',
                    children: [
                        {
                            label: '期末数',
                            prop: 'count',
                            width: '300px',
                            children: [
                                {
                                    label: '合计',
                                    prop: 'count',
                                    width: '300px',
                                },
                            ],
                        },
                    ],
                },
            ],
            records: [],
            value: '',
        })
        const route = useRoute()
        onBeforeMount(() => {
            let year = momentDate('YYYY')
            let num = year - 2023
            for (let i = 1; i <= num; i++) {
                data.arr.push(2024 - i + '年')

            }
            data.startTime = route.query.startTime as string
            data.endTime = route.query.endTime as string
            data.key = route.query.key as string
            data.month = route.query.month as string
            data.value = route.query.value as string
            methods.getData()
        })

        const methods = {
            getData() {
                superviseList({ reportSuperviseType: route.query.type as string, startTime: data.startTime, endTime: data.endTime, usci: data.value }).then((res: any) => {
                    res.map(item => {
                        item.num = item.projectName.split(' ').length - 1
                        for (let i in item) {
                            if (item[i] == '' || item[i] == null || item[i] == undefined) {
                                item[i] = '-'
                            }
                        }
                    })
                    data.records = res
                })
            },
            //下载全部模版
            downloadOut() {
                superviseDownload({ reportSuperviseType: route.query.type as string, startTime: data.startTime, endTime: data.endTime, usci: data.value }).then((res: any) => {
                    derivation(res, ' 资产负债情况')
                })
            },
            //选择月份
            handleCommand(e: string) {
                data.month = String(e)
                data.key = e.replace('年', '')
                methods.getBoundingClientRect()
            },
            //获取开始时间跟结束事件
            getBoundingClientRect() {
                data.startTime = momentStartOf(data.key, 'YYYY-MM-DD')
                if (data.key == momentDate('YYYY')) {
                    data.endTime = momentDate('YYYY-MM-DD')
                } else {
                    data.endTime = data.key + '-12-31'
                }
                methods.getData()
            },
        }
        return {
            ...toRefs(data),
            ...methods, Bottom
        }
    }
})
</script>
<style scoped lang='scss'>
.header {
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    height: 20px;
    padding: 24px 32px;

    .dropdown {
        color: #1878FF;
        font-size: 16px;
        font-weight: bold;
        margin-left: 24px;
    }
}

.report {
    overflow-y: auto;
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    height: calc(100% - 164px);
    padding: 20px 32px;
}

.box {
    background: rgba(24, 120, 255, 0.03);
    width: calc(100% - 40px);
    padding: 20px;
    margin-top: 20px;
    color: #86909C;
    font-size: 12px;
}
</style>